<template>
  <div class="top-header">
    <el-button type="primary" @click="handleClickChangeState"
      >改变state</el-button
    >
    <span>
      {{ count }}
    </span>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from "vue";
import { actions } from "@/mirco/state";

export default {
  name: "TopHeader",
  setup() {
    const count = ref(0);

    const handleClickChangeState = () => {
      actions.setGlobalState({
        count: count.value + 1,
      });
    };
    onMounted(() => {
      actions.onGlobalStateChange((state) => {
        count.value = state.count;
      });
    });
    onUnmounted(() => {
      actions.offGlobalStateChange();
    });
    return {
      count,
      handleClickChangeState,
    };
  },
};
</script>

<style scoped>
.top-header {
  height: 100%;
  background-color: rgb(108, 130, 159);
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
</style>
